
angular.module('zixys.shadow',[])

    .factory('newShadow',[function(){
        function Shadow(name) {
            name = name || 'sh-notitle';
            this.top = 0;
            this.left = 0;
            this.blur = 0;
            this.color = {
                rgb : {
                    r:0,
                    g:0,
                    b:0
                },
                alpha:100
            };
            this.size = 0;
            this.inner = false;
            this.name = name;
        }
        return function(name) {
            return new Shadow(name);
        }
    }])

    .service('shadowsList',[function(){
        this.list = [];
        this.selected = {};
        this.zxNode = null;

        this.$_deploy = function() {
            if(!this.zxNode) return;
            this.zxNode.setData('shadow',this.list);
        }

        this.$_reset = function(){
            this.list = [];
            this.selected = {};
        }

    }])

    .directive('shadowTab',function(){
        return {
            restrict: 'C',
            replace: false,
            template:							
                    '<div id="zixys-shadow-tab" ng-controller="shadowCtrl">'+
                            '<div class="zixys-menu-block">'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">top</span><input class="zixys-spinner" ng-model="shadowsList.selected.top" ng-disabled="!shadowsList.selected.name" type="text"></div>'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">left</span><input class="zixys-spinner" ng-model="shadowsList.selected.left" ng-disabled="!shadowsList.selected.name" type="text"></div>'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">blur</span><input class="zixys-spinner" min="0" ng-model="shadowsList.selected.blur" ng-disabled="!shadowsList.selected.name" type="text"></div>'+
                            '</div>'+
                            '<div class="zixys-menu-block">'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">size</span><input class="zixys-spinner" ng-model="shadowsList.selected.size" ng-disabled="!shadowsList.selected.name" type="text"></div>'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">color</span><input colorpick="shadowsList.selected.color"  type="text" ng-disabled="!shadowsList.selected.name" ></div>'+
                                    '<div class="zixys-input-box"><span class="zixys-menu-label">inner</span><input ng-model="shadowsList.selected.inner" type="checkbox" ng-disabled="!shadowsList.selected.name" ></div>'+
                            '</div>'+
                            '<div class="zixys-sh-select-list">' +
                                '<div select-list="shadowsList.selected" source="shadowsList.list" item="name"></div>' +
                                '<div class="zixys-sl-controls">' +
                                    '<input type="button" ng-click="addShadow()" value="+"  ng-disabled="noElement" >' +
                                    '<input type="button" ng-click="removeShadow()" value="-"  ng-disabled="noElement">' +
                                '</div>'+
                            '</div>'+
                            '<div class="zixys-template-action">'+
                                '<input type="button" value="Revert" />'+
                            '</div>'+								
                    '</div>',


            link: function($scope, element, attrs) {

            }
        }
    })
    
    .controller('shadowCtrl',['$scope','shadowsList','newShadow','zxNodes', function($scope, shadowsList, newShadow, zxNodes) {

        $scope.shadowsList = shadowsList;
        $scope.noElement = true;
        var counter=0;
        $scope.zxNodes = zxNodes;

        function generateName() {
            return "sh-"+(counter++);
        }
        
        function draw(newVal,oldVal) {
            if(newVal != oldVal) {
                shadowsList.$_deploy();
            }
        }
        
        $scope.addShadow = function(){
            shadowsList.selected = newShadow(generateName());
            shadowsList.list.push(shadowsList.selected);
        }
        
        $scope.removeShadow = function () {
            for (var i=0; i<shadowsList.list.length; i++) {
                if (shadowsList.selected === shadowsList.list[i]) {
                    shadowsList.list.splice(i,1);
                    shadowsList.selected = shadowsList.list[0] || {};
                    break;
                }
            }
        }
        
        $scope.$on('selectElement',function(event,zixysNode) {


        });

        $scope.$watch('zxNodes.selected',function(zixysNode){
           if (zixysNode) {
               $scope.noElement = false;
               shadowsList.zxNode = zixysNode;

               if (zixysNode.data && zixysNode.data.shadow) {
                   shadowsList.list = zixysNode.data.shadow;
                   shadowsList.selected = zixysNode.data.shadow[0];
               } else {
                   shadowsList.$_reset();
               }
           } else {
               $scope.noElement = true;
               shadowsList.zxNode = null;
           }
        })

        $scope.$watch('shadowsList.selected.top',draw);
        $scope.$watch('shadowsList.selected.left',draw);
        $scope.$watch('shadowsList.selected.blur',draw);
        $scope.$watch('shadowsList.selected.size',draw);
        $scope.$watch('shadowsList.selected.inner',draw);
        $scope.$watch('shadowsList.selected.color',draw,true);
        
    }])

    .run(['$rootScope',function($rootScope){
        
        $rootScope.$on('zixysDomReady',function(event,params){
            $rootScope.addTab('Shadow','shadow-tab');
        });
        
    }]);
    
    